<template>
  <!-- 
      4.Vue3.0中的响应式原理
      
      Vue2.x的响应式

        1.实现原理:

          a.对象类型: 通过 Object.defineProperty() 对属性的读取，修改进行拦截(数据劫持)

          b.数组类型: 通过重写更新数组的一系列方法来实现拦截(对数组的变更方法进行了包裹)

            Object.defineProperty(data, 'count', {
              get () {},

              set () {}
            })

        2.存在问题:

            a.新增属性,删除属性, 界面不会更新

            b.直接通过下标修改数组, 界面不会自动更新

   -->
  <div>
    <h1>我是Vue2写的效果</h1>
    <h2 v-show="person.name">姓名: {{ person.name }}</h2>
    <h2>年龄: {{ person.age }}</h2>
    <h2 v-show="person.sex">性别: {{ person.sex }}</h2>
    <h2>爱好: {{ person.hobby }}</h2>
    <button @click="addSex">添加一个sex属性</button>
    <button @click="addSex">删除name属性</button>
    <button @click="updateHobby">修改第一个爱好的名字</button>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'App',
  data () {
    return {
      person: {
        name: '张三',
        age: 18,
        hobby: ['抽烟', '喝酒', '烫头']
      }
    }
  },
  methods: {
    addSex () {
      console.log(this.person.sex)
      this.person.sex = '女'
      console.log(this.person.sex) //这里数据修改了, 但Object.defineProperty检测不到改变
      this.$set(this.person, 'sex', '女')
      Vue.set(this.person, 'sex', '女')
    },
    deleteName () {
      console.log(this.person.name)
      delete this.person.name //这里数据修改了, 但Object.defineProperty检测不到改变
      console.log(this.person.name)
      this.$delete(this.person, 'name')
      Vue.delete(this.person, 'name')
    },
    updateHobby () {
      this.person.hobby[0] = '逛街'
      this.$set(this.person.hobby, 0, '逛街')
      this.person.hobby.splice(0,1,'逛街')
    }

  }
}
</script>

<style>

</style>
